async function getStu() {
  const res = await axios({
    url: "/dashboard",
  });
  console.log(res);
  const resData = res.data.overview;
  const resXin = res.data.salaryData;
  const resTu = res.data.groupData;
  const resDi = res.data.provinceData;
  console.log(res.data.provinceData);
  for (const k in resData) {
    document.querySelector(`[name=${k}]`).innerHTML = resData[k];
  }
  const resYear = res.data.year;
  function getYear() {
    var myChart = echarts.init(document.getElementById("line"));
    var option = {
      title: {
        text: "2021",
      },
      xAxis: {
        type: "category",
        axisLine: {
          lineStyle: {
            type: "dashed",
            color: "#999",
          },
        },
        data: resYear.map((item) => item.month),
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: "true",
          lineStyle: {
            type: "dashed",
          },
        },
      },
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          data: resYear.map((item) => item.salary),
          type: "line",
          symbolSize: "10",
          smooth: true,
          lineStyle: {
            width: "5",
            color: "#699ef8",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#9ec5fa",
                },
                {
                  offset: 0.5,
                  color: "#fff",
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      grid: {
        top: "15%",
      },
    };
    myChart.setOption(option);
  }
  function getXin() {
    var myChart = echarts.init(document.getElementById("salary"));

    option = {
      title: {
        text: "班级薪资分布图",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        bottom: "5%",
        left: "center",
      },
      series: [
        {
          name: "班级薪资分布",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: resXin.map((item) => {
            const name = item.label;
            const value = item.b_count;
            return { name, value };
          }),
        },
      ],
    };
    myChart.setOption(option);
  }

  function getTu() {
    var myChart = echarts.init(document.getElementById("lines"));
    option01 = {
      xAxis: {
        type: "category",
        data: resTu[1].map((item) => item.name),
        axisLine: {
          lineStyle: {
            type: "dashed",
            color: "#999",
          },
        },
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: "true",
          lineStyle: {
            type: "dashed",
          },
        },
      },
      series: [
        {
          data: resTu[1].map((item) => item.hope_salary),
          type: "bar",
        },
        {
          data: resTu[1].map((item) => item.salary),
          type: "bar",
        },
      ],
    };
    const btns = document.querySelectorAll("#btns button");

    btns.forEach((dom) => {
      dom.addEventListener("click", function () {
        document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
        this.classList.add("btn-blue");
        const index = this.innerHTML.trim();
        console.log(index);
        console.log(option01.xAxis.data);
        option01.xAxis.data = resTu[index].map((item) => item.name);
        option01.series[0].data = resTu[index].map((item) => item.hope_salary);
        option01.series[1].data = resTu[index].map((item) => item.salary);
        myChart.setOption(option01);
      });
    });
    myChart.setOption(option01);
  }
  function getEr() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("gender"));

    // 指定图表的配置项和数据
    option = {
      title: [
        {
          text: "男女薪资分布",
          left: "5%",
        },
        {
          subtext: "男生",
          left: " 50%",
          top: "45%",
          textAlign: "center",
          subtextStyle: {
            fontSize: 20,
            color: "black",
          },
        },
        {
          subtext: "女生",
          left: "50%",
          bottom: "0%",
          textAlign: "center",
          subtextStyle: {
            fontSize: 20,
            color: "black",
          },
        },
      ],
      tooltip: {
        trigger: "item",
      },

      series: [
        {
          width: "50%",
          center: ["100%", "23%"],
          name: "Access From",
          type: "pie",
          radius: ["50%", "70%"],
          data: [
            { value: 1048, name: "1万以下" },
            { value: 735, name: "2万以上" },
            { value: 580, name: "1-1.5万" },
            { value: 484, name: "1.5-2万" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        {
          subtext: "女生",
          width: "50%",
          center: ["100%", "72%"],
          name: "Access From",
          type: "pie",
          radius: ["50%", "70%"],

          data: [
            { value: 300, name: "1万以下" },
            { value: 735, name: "2万以上" },
            { value: 266, name: "1-1.5万" },
            { value: 696, name: "1.5-2万" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    myChart.setOption(option);
    // 使用刚指定的配置项和数据显示图表。
  }
  const initMapChart = (provinceData) => {
    const myEchart = echarts.init(document.querySelector("#map"));
    const dataList = [
      { name: "南海诸岛", value: 0 },
      { name: "北京", value: 0 },
      { name: "天津", value: 0 },
      { name: "上海", value: 0 },
      { name: "重庆", value: 0 },
      { name: "河北", value: 0 },
      { name: "河南", value: 0 },
      { name: "云南", value: 0 },
      { name: "辽宁", value: 0 },
      { name: "黑龙江", value: 0 },
      { name: "湖南", value: 0 },
      { name: "安徽", value: 0 },
      { name: "山东", value: 0 },
      { name: "新疆", value: 0 },
      { name: "江苏", value: 0 },
      { name: "浙江", value: 0 },
      { name: "江西", value: 0 },
      { name: "湖北", value: 0 },
      { name: "广西", value: 0 },
      { name: "甘肃", value: 0 },
      { name: "山西", value: 0 },
      { name: "内蒙古", value: 0 },
      { name: "陕西", value: 0 },
      { name: "吉林", value: 0 },
      { name: "福建", value: 0 },
      { name: "贵州", value: 0 },
      { name: "广东", value: 0 },
      { name: "青海", value: 0 },
      { name: "西藏", value: 0 },
      { name: "四川", value: 0 },
      { name: "宁夏", value: 0 },
      { name: "海南", value: 0 },
      { name: "台湾", value: 0 },
      { name: "香港", value: 0 },
      { name: "澳门", value: 0 },
    ];
    provinceData.map((item) => {
      dataList.find((v) => {
        if (item.name.indexOf(v.name) !== -1) {
          v.value = item.value;
        }
      });
    });
    let option = {
      title: {
        text: "籍贯分布",
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} 位学员",
        borderColor: "transparent",
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: "#fff",
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: "left",
        bottom: "20",
        text: ["6", "0"],
        inRange: {
          color: ["#ffffff", "#0075F0"],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: "china",
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: "10",
            color: "rgba(0,0,0,0.7)",
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(0, 0, 0, 0.2)",
            color: "#e0ffff",
          },
          emphasis: {
            areaColor: "#34D39A",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      series: [
        {
          name: "籍贯分布",
          type: "map",
          geoIndex: 0,
          data: dataList,
        },
      ],
    };
    myEchart.setOption(option);
  };
  initMapChart(resDi);
  getEr();
  getTu();
  getXin();
  getYear();
}
getStu();
